<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var ReactComponent = React.createClass({
      getInitialState:function(){
        return{
          type:"text",
          txt:"明文"
        }
      },
      componentWillReceiveProps:function(nextProps,nextState){
          console.log("componentWillReceiveProps");
      },
      shouldComponentUpdate:function(nextProps,nextState){
        console.log("shouldComponentUpdate");
        console.log(nextProps);
        return true;
      },
      componentWillUpdate:function(){
        console.log("componentWillUpdate");
      },
      handlerClick:function(){        
        if(this.state.type == "text"){
          this.setState({
            type:"password",
            txt:"密文"
          })
        }else{
          this.setState({
            type:"text",
            txt:"明文"
          })
        }
        
      },
      render:function(){    
       

      return (  <div>
                    <h1>React Component</h1>
                    <input type={this.state.type}/>
                    <button onClick={this.handlerClick}>{this.state.txt}</button>
                  </div>
               )
      }
    });

    // 思路：
    // 因为state的改变会导致组件发生二次渲染
    // 文本框类似设置成state，包括按钮的文字也设置成state
    // 先将state绑定到页面上，然后在按钮点击以后改变state值

    ReactDOM.render( <ReactComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    
</script>
</body>
</html>